<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page import="com.lft.examsys.util.DateTimeUtil" %>
<html>
<head>
	<title>选择试卷</title>
	<jsp:include page="/layout/_imports.jsp"></jsp:include>
</head>
<body>
<jsp:include page="/layout/_nav.jsp"></jsp:include>

<div class="container">
	<h2>请选择你要开始考试的试卷！</h2>
	<c:if test="${not empty errMsg}">
		<div class="alert alert-danger">${errMsg}</div>
	</c:if>
	<table class="table" style="text-align: center">
		<thead class="thead-dark">
		<tr>
			<th scope="col">序号</th>
			<th scope="col">试卷名</th>
			<th scope="col">考试开始时间</th>
			<th scope="col">时限（分钟）</th>
			<th scope="col">试题数</th>
			<th scope="col">操作</th>
		</tr>
		</thead>
		<tbody>

		<c:forEach items="${papers}" var="i" varStatus="paper">
			<tr>
				<th scope="row">${paper.index + 1}</th>
				<td>${i.title}</td>
				<td class="begin_time"><fmt:formatDate value="${i.begin}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
				<td class="limitation">${i.limitation}</td>
				<td>${itemsCount.get(i.id) != null?itemsCount.get(i.id):"0"}</td>
				<td>
					<div>
						<input type="hidden" name="id" value="${i.id}">
						<c:if test='${DateTimeUtil.paperStatus(i.begin,i.limitation).equals("未开始")}'>
							<button class="btn begin_paper btn-secondary" disabled>
								<a href="/exam/begin?id=${i.id}">
									未开始
								</a>
							</button>
						</c:if>
						<c:if test='${DateTimeUtil.paperStatus(i.begin,i.limitation).equals("已开始")}'>
							<button class="btn begin_paper btn-primary">
								<a href="/exam/begin?id=${i.id}">
									已开始
								</a>
							</button>
						</c:if>
						<c:if test='${DateTimeUtil.paperStatus(i.begin,i.limitation).equals("已结束")}'>
							<button class="btn begin_paper btn-danger" disabled>
								<a href="/exam/begin?id=${i.id}">
									已结束
								</a>
							</button>
						</c:if>

					</div>
				</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>
	<div class="page_identifier">
		<c:if test="${page - 1 > 0}">
			<a class="page_previous page_item" href="/exam?page=${page - 1}&size=${size}">上一页</a>
		</c:if>
		<c:if test="${page - 5 > 0}">
			<a class="page_previous page_item" href="/exam?page=1&size=${size}">1</a>
			<a class="page_previous page_item" href="/exam?page=${page - 6}&size=${size}">...</a>
		</c:if>
		<c:forEach var="i"
				   begin="${(page - 5 < 0 ? 0 : page - 5) + 1}"
				   end="${(page + 5 > total ? total : page + 5)}">
			<a class="page_count_1 page_item ${page == i ? "btn btn-primary" : ""}" href="/exam?page=${i}&size=${size}">${i}</a>
		</c:forEach>
		<c:if test="${page + 5 < total}">
			<a class="page_previous page_item" href="/exam?page=${page + 6}&size=${size}">...</a>
			<a class="page_previous page_item" href="/exam?page=${total}&size=${size}">${total}</a>
		</c:if>
		<c:if test="${page + 1 <= total}">
			<a class="page_next page_item" href="/exam?page=${page + 1}&size=${size}">下一页</a>
		</c:if>
		<div class="page_info">页面${page}/${total},共有${count}条数据</div>
	</div>

	<style>
		.page_identifier {
			display: flex;
			flex-direction: row;
			justify-content: center;
		}

		.page_item {
			text-decoration: none;
			color: black;
			width: 50px;
			height: 50px;
			border: 1px solid grey;
			cursor: pointer;
			line-height: 50px;
			text-align: center;
			padding: unset;
			border-radius: 5px;
			margin: 0 5px;

		}

		.page_item:hover {
			border: 1px solid #4100d5;
			color: #fff;
			background: #2f7ef2;
		}

		.page_item.active {
			width: 50px;
			height: 50px;
			border: 1px solid grey;
			cursor: pointer;
			line-height: 50px;
			text-align: center;
		}

		.page_info {
			text-align: center;
			line-height: 50px;
			font-weight: lighter;
		}
		.begin_paper a {
			color: #fff;
			text-decoration: none;
		}
		.begin_paper a:hover {
			color: #fff
		}
		.begin_paper:hover {
			cursor: pointer;
		}

	</style>
</div>

<script>
	$(document).ready(function () {
		var local_time = getNowTime();
		var paper_times = document.getElementsByClassName("begin_time")
		var begin_papers = document.getElementsByClassName("begin_paper")
		var limitations = document.getElementsByClassName("limitation")
		var status = document.getElementById("begin_paper_status")

		// for (let i = 0; i < paper_times.length; i++) {
		// 	var begin = paper_times[i].innerHTML;
		// 	var limit = limitations[i].innerHTML; //注意字符串 相加先转Number
		// 	var time = new Date(begin);
		// 	var end = new Date(time.setMinutes(time.getMinutes() + Number(limit)))
		// 	end = format(end, "yyyy-MM-dd hh:mm:ss");
		// 	console.log("第" + Number(i+1) + "个结束时间",end);
		// 	if (local_time > paper_times[i].innerHTML && local_time < end) {
		// 		$(begin_papers[i]).removeAttr("disabled","")
		// 	}
		// }
	});

	function getNowTime() {
		var date = new Date();
		//年 getFullYear()：四位数字返回年份
		var year = date.getFullYear();  //getFullYear()代替getYear()
		//月 getMonth()：0 ~ 11
		var month = date.getMonth() + 1 ;
		//日 getDate()：(1 ~ 31)
		var day = date.getDate();
		//时 getHours()：(0 ~ 23)
		var hour = date.getHours();
		//分 getMinutes()： (0 ~ 59)
		var minute = date.getMinutes();
		//秒 getSeconds()：(0 ~ 59)
		var second = date.getSeconds();

		month = month<10?"0"+month:month
		day = day<10?"0"+day:day
		hour = hour<10?"0"+hour:hour
		minute = minute<10?"0"+minute:minute
		second = second<10?"0"+second:second

		var time = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
		return time;
	}

</script>
</body>
</html>
